<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../css/zhuye.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<body>
    <div class='box-top'>
        <div class="box-logo">
            美发管理系统
        </div>
        <div class="fenzu">
        </div>
        <div class='gr'>
            <div class="gr-bottom">
                <span>zhao123</span>
                <div class="sanjiao"></div>
            </div>
        </div>
        <div class="tuichu" style="display:none">
            <span>退出</span>
        </div>
    </div>
    <script src="../jQuery库/jquery-1.10.1.js"></script>
    <script src="../js/besaurl.js"></script>
    <script>
        $('.gr-bottom').click(function(){
            // console.log(111);
            $('.tuichu').css({
                display:'flex',
                transition: '2s'
            })
        })
        $('.gr-bottom').dblclick(function(){
            // console.log(111);
            $('.tuichu').css({
                display:'none',
                transition: '2s'
            })
        })
    </script>
    <div class="box-cent">
        <div class="box-centleft">
            <dl class="dl1">
                <dt>
                    前台收银
                </dt>
                <dd>
                    <div class="dd-div">><span>无卡消费</span></div>
                    <div class="xian"></div>
                    <div  class="dd-div">><span>有卡消费</span></div>
                    <div class="xian"></div>
                </dd>
            </dl>
            <div class="xian"></div>
            <dl class="dl2">
                <dt>店务管理</dt>
                <dd>
                    <div class="dd-div">><span>顾客预约</span></div>
                    <div class="xian"></div>
                    <div class="dd-div">><span>员工管理</span></div>
                    <div class="xian"></div>
                </dd>
            </dl>
            <div class="xian"></div>
            <dl class="dl3">
                <dt>卡项管理</dt>
                <dd>
                    <div class="dd-div">><span>会员卡充值</span></div>
                    <div class="xian"></div>
                    <div class="dd-div">><span>卡挂失</span></div>
                    <div class="xian"></div>
                </dd>
            </dl>
            <div class="xian"></div>
            <dl class='dl4'>
                <dt>财务报表</dt>
                <dd>
                    <div>><span>员工每日业绩</span></div>
                    <div class="xian"></div>
                    <div>><span>员工工资计算</span></div>
                    <div class="xian"></div>
                    <div>><span>店内日营业额统计</span></div>
                    <div class="xian"></div>
                    <div>><span>店内月营业额统计</span></div>
                    <div class="xian"></div>
                </dd>
            </dl>
            <div class="xian"></div>
        </div>
        <div class="box-centright">
            <div class="centright-top"></div>
            <!-- 主要内容 -->
            <div class="right-cent">
                <!-- 无卡消费 -->
                <div class="boxcent" style="display: none;">
                    <div class="wkxf-top">
                        请选择项目
                        <select name="" id="a1" onchange="addOption()">
                            <option value="请选择项目">请选择项目</option>
                        </select>

                        <select name="" id="a2">
                            <option value="请选择项目">请选择项目</option>
                        </select>
                    </div>
                    <!-- 三级联动 -->
                    <script>
                        var city = new Array;        
                        city['剪发'] = ['请选择项目',"发型师剪发", "总监剪发", "老板剪发"];        
                        city['烫发'] = ['请选择项目',"冷烫国产药水", "冷烫日本药水",'冷烫韩国药水',"热烫国产药水", "热烫日本药水",'热烫韩国药水'];    
                        city['染发'] = ['请选择项目',"黑色国产药水", "黑色日本药水",'黑色韩国药水',"彩色国产药水", "彩色日本药水",'彩色韩国药水']; 
                        city['护理'] = ['请选择项目','国产','黑人头','欧莱雅'];
                        function allCity() {            
                        var select1 = document.getElementById("a1");            
                        for(var i in city) {  //这里注意遍历数组的写法
                            select1.add(new Option(i, i), null);
                        }   
                        addOption(); // 初始化选项     
                        }        
                        function addOption() {            
                        var select2 = document.getElementById("a2");
                        var select1 = document.getElementById("a1").value; 
                        select2.length = 0; //每次都先清空一下市级菜单  
                        if(select1 != '请选择省份') {                
                            for(var i in city[select1 ]) {    
                            select2.add(new Option(city[select1][i], city[select1][i]), null);                
                            }            
                        }else if (sheng == '请选择省份'){              
                            select2.length = 0;           
                            select2.add(new Option("请选择城市", "请选择城市"), null); 
                        }      
                        }       
                        window.onload = allCity();
                    </script>
                    <!-- 消费显示 -->
                    <div class="wkxf-cent">
                        <table border='1'>
                            <thead>
                                <tr width="40px" bgcolor='#F2F2F2'>
                                    <td>编号</td>
                                    <td>名称</td>
                                    <td>详情</td>
                                    <td>价格</td>
                                </tr>
                            </thead>
                            <tbody style="display: none;" class='tbo'>

                            </tbody>
                        </table>
                    </div>
                    <div class="wkxf-but">
                        <button class="butt">结算</button>
                    </div>
                </div>
                <!-- 无卡消费 -->
                <script>
                    $($('#a2')).bind('input propertychange',function(){
                        console.log($('#a2').val())
                        $.ajax({
                            method:'get',
                            url:`${besaurl}hair_kind_search?name=${$('#a1').val()}&detail=${$('#a2').val()}`,
                            success:function(data){
                                console.log(data);
                                $('.tbo').html(
                                    `<tr v-for="(item,index) in arr" :key="index" >
                                        <td>{{item.kind_id}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.detail}}</td>
                                        <td>{{item.price}}元</td></tr>`
                                )
                                const v_c = new Vue({
                                    el: '.wkxf-cent',
                                    data: {
                                        arr:data
                                    },
                                    watch:{
                                    }
                                })
                                $('.tbo').css({
                                    display:''
                                })
                                $('.butt').click(function(){
                                    // console.log(data[0].name);
                                    $.ajax({
                                        method:'post',
                                        url:`${besaurl}expense`,
                                        data:{
                                            expense_id:Math.floor((Math.random() * 100000) + 1),
                                            member_id:'03',
                                            detail:data[0].detail,
                                            employee_id:'01',
                                            discount:1,
                                            yingshou:data[0].price,
                                            shishou:data[0].price
                                        },
                                        success:function(data){
                                            console.log(data);
                                        },
                                        error:function(err){
                                            console.log(err);
                                        }
                                    })
                                })
                            },
                            error:function(err){
                                console.log(err);
                            }

                        })
                    })
                    $('.butt').click(function(){
                        console.log($('.tbo').find('td:eq(0)').val());
                    })
                    // function shangchuan(data){

                    // }
                </script>




                <!-- 有卡消费 -->
                <div class='boxcent' style="display: none;">
                   <div class="wkxf-top">
                       请输入会员卡号
                       <input type="text" class="huiyuan">
                        请选择项目
                        <select name="" id="a3" onchange="addOptions()">
                            <option value="请选择项目">请选择项目</option>
                        </select>

                        <select name="" id="a4">
                            <option value="请选择项目">请选择项目</option>
                        </select>
                    </div>
                    <!-- 三级联动 -->
                    <script>
                        // var city = new Array;        
                        // city['剪发'] = ['请选择项目',"发型师剪发", "总监剪发", "老板剪发"];        
                        // city['烫发'] = ['请选择项目',"冷烫国产药水", "冷烫日本药水",'冷烫韩国药水',"热烫国产药水", "热烫日本药水",'热烫韩国药水'];    
                        // city['染发'] = ['请选择项目',"黑色国产药水", "黑色日本药水",'黑色韩国药水',"彩色国产药水", "彩色日本药水",'彩色韩国药水']; 
                        // city['护理'] = ['请选择项目','国产','黑人头','欧莱雅'];
                        function allCityr() {            
                        var select3 = document.getElementById("a3");            
                        for(var i in city) {  //这里注意遍历数组的写法
                            select3.add(new Option(i, i), null);
                        }   
                        addOptions(); // 初始化选项     
                        }        
                        function addOptions() {            
                        var select4 = document.getElementById("a4");
                        var select3 = document.getElementById("a3").value; 
                        select4.length = 0; //每次都先清空一下市级菜单  
                        if(select3 != '请选择省份') {                
                            for(var i in city[select3 ]) {    
                            select4.add(new Option(city[select3][i], city[select3][i]), null);                
                            }            
                        }else if (sheng == '请选择省份'){              
                            select4.length = 0;           
                            select4.add(new Option("请选择城市", "请选择城市"), null); 
                        }      
                        }       
                        window.onload = allCityr();
                    </script>
                    <div class="ykxf-huiyuan">
                        <table border='1' width="400px">
                            <thead>
                                <tr width="40px" bgcolor='#F2F2F2'>
                                    <td>会员姓名</td>
                                    <td>会员等级</td>
                                    <td>消费折扣</td>
                                    <td>余额</td>
                                </tr>
                            </thead>
                            <tbody style="display: none;" class='tbo2'>

                            </tbody>
                        </table>
                    </div>


                     <div class="wkxf-cent1">
                        <table border='1'>
                            <thead>
                                <tr width="40px" bgcolor='#F2F2F2'>
                                    <td>编号</td>
                                    <td>名称</td>
                                    <td>详情</td>
                                    <td>价格</td>
                                </tr>
                            </thead>
                            <tbody style="display: none;" class='tbo1'>

                            </tbody>
                        </table>
                    </div>
                    <div class="wkxf-but">
                        <button class="butts">结算</button>
                    </div>
                   
                </div>
                 <!-- 有卡消费 -->
                 <script>
                    $($('.huiyuan')).bind('input propertychange',function(){
                        // console.log($('.huiyuan').val());
                        $.ajax({
                            method:'get',
                            url:`${besaurl}member_search?member_id=${$('.huiyuan').val()}`,
                            success:function(data){
                                console.log(data);
                                console.log($('.tbo2'))
                                $('.tbo2').html(
                                    `<tr v-for="(item,index) in arr" :key="index" id='trr1'>
                                        <td>{{item.member_name}}</td>
                                        <td>{{item.member_level}}</td>
                                        <td class='zhekou'>{{item.discount}}</td>
                                        <td>{{item.remaining_sum}}元</td></tr>`
                                )
                                const v_a=new Vue({
                                    el: '.ykxf-huiyuan',
                                    data: {
                                        arr:data
                                    },
                                })
                                $('.tbo2').css({
                                    display:''
                                })

                            },
                            error:function(err){
                                console.log(err);
                            }
                        })
                    })
                    $($('#a4')).bind('input propertychange',function(){
                        console.log($('#a4').val())
                        $.ajax({
                            method:'get',
                            url:`${besaurl}hair_kind_search?name=${$('#a3').val()}&detail=${$('#a4').val()}`,
                            success:function(data){
                                console.log(data);
                                $('.tbo1').html(
                                    `<tr v-for="(item,index) in arr" :key="index" >
                                        <td>{{item.kind_id}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.detail}}</td>
                                        <td>{{item.price}}元</td></tr>`
                                )
                                 const v_b  = new Vue({
                                    el: '.wkxf-cent1',
                                    data: {
                                        arr:data
                                    },
                                    watch:{
                                    }
                                })
                                $('.tbo1').css({
                                    display:''
                                })
                                $('.butts').click(function(){
                                    // console.log(data[0].name);
                                    console.log($('.huiyuan').val());
                                    console.log($('.zhekou').html())
                                    $.ajax({
                                        method:'post',
                                        url:`${besaurl}expense`,
                                        data:{
                                            expense_id:Math.floor((Math.random() * 100000) + 1),
                                            member_id:$('.huiyuan').val(),
                                            detail:data[0].detail,
                                            employee_id:'01',
                                            discount:$('.zhekou').html(),
                                            yingshou:data[0].price,
                                            shishou:Math.floor(data[0].price * $('.zhekou').html())
                                        },
                                        success:function(data){
                                            console.log(data);
                                        },
                                        error:function(err){
                                            console.log(err);
                                        }
                                    })
                                })
                            },
                            error:function(err){
                                console.log(err);
                            }

                        })
                    })
                </script>

                <!-- 顾客预约 -->
                <div class="boxcent" style="display: none;">
                    <div class="yuyue">
                        <span>顾客姓名</span>
                        <input type="text" class="gukexingming"><br>
                        <span>会员卡号</span>
                        <input type="text" class="huiyuankh"><br>
                        <span class="yuangong">员工</span>
                        <select name="" id="yuangong">
                            <option value="请选择托尼">请选择托尼</option>
                            <option v-for="(item,index) in arr" :key="index">{{item.employee_name}}</option>
                        </select><br>
                        <span>预约时间</span>
                        <input type="date" class="yyshijian">
                    </div>
                    <button class="tianjiayy">添加</button>
                    <div class='yyxianshi'>
                        <table border="1">
                            <thead>
                                <tr>
                                    <td>顾客姓名</td>
                                    <td>会员卡号</td>
                                    <td>员工</td>
                                    <td width="280px">预约时间</td>
                                </tr>
                            </thead>
                            <tbody class="yyxx">
                                <tr v-for="(item,index) in arr" :key="index">
                                    <td>{{item.customer_name}}</td>
                                    <td>{{item.member_id}}</td>
                                    <td>{{item.employee_id}}</td>
                                    <td>{{item.appointment_time}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 顾客预约 -->
                <script>
                    //获取员工
                    $.ajax({
                        method:'get',
                        url: `${besaurl}message_search`,
                        success:function(data){
                            console.log(data);
                            const v_e=new Vue({
                                    el: '#yuangong',
                                    data: {
                                        arr:data
                                    },
                                })
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })

                    //上传预约
                    $('.tianjiayy').click(function(){
                        // console.log($('.gukexingming').val())
                        // console.log($('.huiyuankh').val())
                        // console.log($('#yuangong option:selected').text());
                        // console.log($('.yyshijian').val());
                        $.ajax({
                            method:'get',
                            url: `${besaurl}message_search?employee_name=${$('#yuangong option:selected').text()}`,
                            success:function(data){
                                console.log(data[0].employee_id);
                                $.ajax({
                                    method:'post',
                                    url:`${besaurl}customer`,
                                    data:{
                                        customer_name:$('.gukexingming').val(),
                                        member_id:$('.huiyuankh').val(),
                                        employee_id:data[0].employee_id,
                                        appointment_time:$('.yyshijian').val()
                                    },                
                                    success:function(data){
                                        console.log(data);
                                    },
                                    error:function(err){
                                        console.log(err);
                                    }                               
                                })
                            },
                            error:function(err){
                                console.log(err);
                            }
                        })
                        
                    })
                    //预约显示
                    $.ajax({
                        method:'get',
                        url: `${besaurl}customer_search`,
                        success:function(data){
                                const v_r=new Vue({
                                    el: '.yyxx',
                                    data: {
                                        arr:data
                                    },
                                })

                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                
                </script>

                <!-- 员工信息表 -->
                <div class="boxcent" style="display: none;">
                    <div class="ygluru">
                        <span>员工编号</span>
                        <input type="text"><br>
                        <span>员工姓名</span>
                        <input type="text"><br>
                        <span>员工职位</span>
                        <input type="text"><br>
                        <span class="dianhua">电话</span>
                        <input type="tel"><br>
                        <span class="dianhua">邮箱</span>
                        <input type="email"><br>
                        <span>上传头像</span>
                        <button id="btn111">上传图片</button>
                        <input type="file" class="file_inp" hidden>
                        <div id="box">
                        </div>
                    </div>
                    <button class="tianjiayg">添加</button>
                    <div class='ygxianshi'>
                        <table border="1">
                            <thead>
                                <tr>
                                    <td>员工编号</td>
                                    <td>会员姓名</td>
                                    <td>员工职位</td>
                                    <td width="200px">电话</td>
                                    <td width="200px">邮箱</td>
                                    <td width="200px">头像</td>
                                </tr>
                            </thead>
                            <tbody class="ygxx">
                                <tr v-for="(item,index) in arr" :key="index">
                                    <td>{{item.employee_id}}</td>
                                    <td>{{item.employee_name}}</td>
                                    <td>{{item.employee_zhiwei}}</td>
                                    <td>{{item.phone}}</td>
                                    <td>{{item.email}}</td>
                                    <td><img :src="item.head_img" alt="" class="td_img"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 员工信息表 -->
                <script>
                    //上传图片
                    $(".file_inp").change(function () {
                        var file = this.files[0];
                        var reader = new FileReader();
                        
                        // 将图片转换为base64字符串
                        reader.readAsDataURL(file);
                        reader.onload = function () {
                            img_url = reader.result;
                            // 创建
                            var img = new Image();
                            img.src = img_url;
                            box.appendChild(img);
                        }
                    })
                    $("#btn111").click(function (e) {
                        e.preventDefault();
                        $(".file_inp").click();
                    })
                    
                    
                    $('.tianjiayg').click(function(){
                        // console.log($('.ygluru>input').eq(0).val());
                        $.ajax({
                            method:'post',
                            url:`${besaurl}message`,
                            data:{
                                employee_id:$('.ygluru>input').eq(0).val(),
                                employee_name:$('.ygluru>input').eq(1).val(),
                                employee_zhiwei:$('.ygluru>input').eq(2).val(),
                                phone:$('.ygluru>input').eq(3).val(),
                                email:$('.ygluru>input').eq(4).val(),
                                head_img:img_url
                            },
                            success:function(data){
                                console.log(data);
                            },
                            error:function(err){
                                console.log(err);
                            }
                        })
                    })
                    $.ajax({
                        method:'get',
                        url:`${besaurl}message_search`,
                        success:function(data){
                            console.log(data);
                            const v_u=new Vue({
                                    el: '.ygxx',
                                    data: {
                                        arr:data
                                    },
                                })
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                    
                </script>

                <div class="boxcent" style="display: none;">
                    <div class="hykxx">
                        <div class="hykxx1">
                            <div class="hykxx-top">会员卡信息录入表</div><br>
                            <span style="margin-left: 31px;">编号</span>
                            <input type="text"><br>
                            <span>会员姓名</span>
                            <input type="text"><br>
                            <span>会员等级</span>
                            <input type="text"><br>
                            <span>充值金额</span>
                            <input type="text"><br>
                            <span>消费折扣</span>
                            <input type="text"><br>
                            <span style="margin-left: 31px;">余额</span>
                            <input type="text"><br>
                            <button class="hyxxlr">添加</button>
                        </div>
                        <div class="hykxx2">
                            <div class="hykxx-top">会员卡等级录入表</div><br>
                            <span style="margin-left: 31px;">编号</span>
                            <input type="text"><br>
                            <span>会员等级</span>
                            <input type="text"><br>
                            <span>充值金额</span>
                            <input type="text"><br>
                            <span>消费折扣</span>
                            <input type="text"><br>
                            <button class="hyxxlr1">添加</button>
                        </div>
                        <div class="hykxx3">
                            <div class="hykxx-top">会员卡充值</div><br>
                            <span style="margin-left: 31px;">编号</span>
                            <input type="text"><br>
                            <span>会员姓名</span>
                            <input type="text"><br>
                            <span>会员等级</span>
                            <input type="text"><br>
                            <span>充值金额</span>
                            <input type="text"><br>
                            <span>消费折扣</span>
                            <input type="text"><br>
                            <button class="hyxxlr2">添加</button>
                        </div>
                    </div>
                </div>
                <!-- 会员卡信息/等级/充值 -->
                <script>
                    $('.hyxxlr').click(function(){
                    $.ajax({
                        method:'post',
                        url:`${besaurl}member_info`,
                        data:{
                            member_id:$('.hykxx1>input').eq(0).val(),
                            member_name:$('.hykxx1>input').eq(1).val(),
                            member_level:$('.hykxx1>input').eq(2).val(),
                            money:$('.hykxx1>input').eq(3).val(),
                            discount:$('.hykxx1>input').eq(4).val(),
                            remaining_sum:$('.hykxx1>input').eq(5).val(),
                        },
                        success:function(data){
                            console.log(data);
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                    })

                    $('.hyxxlr1').click(function(){
                    $.ajax({
                        method:'post',
                        url:`${besaurl}member`,
                        data:{
                            level_id:$('.hykxx2>input').eq(0).val(),
                            member_level:$('.hykxx2>input').eq(1).val(),
                            money:$('.hykxx2>input').eq(2).val(),
                            discount:$('.hykxx2>input').eq(3).val(),
                        },
                        success:function(data){
                            console.log(data);
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                    })


                    // Memberecharge
                    $('.hyxxlr2').click(function(){
                    $.ajax({
                        method:'post',
                        url:`${besaurl}Memberecharge`,
                        data:{
                            member_id:$('.hykxx3>input').eq(0).val(),
                            member_name:$('.hykxx3>input').eq(1).val(),
                            member_level:$('.hykxx3>input').eq(2).val(),
                            money:$('.hykxx3>input').eq(3).val(),
                            discount:$('.hykxx3>input').eq(4).val(),
                        },
                        success:function(data){
                            console.log(data);
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                    })
                </script>

                <!--卡挂失/全部会员卡显示 -->
                <div class="boxcent" style="display: none;">
                    <div class="kgs">
                        <table border="1px">
                            <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>会员姓名</td>
                                    <td>会员等级</td>
                                    <td>充值金额</td>
                                    <td>消费折扣</td>
                                    <td>余额</td>
                                    <td width="80px">操作(挂丢)</td>
                                </tr>
                            </thead>
                            <tbody class="qbhyxx">
                                <tr v-for="(item,index) in arr" :key="index" style="text-align: center;">
                                    <td>{{item.member_id}}</td>
                                    <td>{{item.member_name}}</td>
                                    <td>{{item.member_level}}</td>
                                    <td>{{item.money}}</td>
                                    <td>{{item.discount}}</td>
                                    <td>{{item.remaining_sum}}</td>
                                    <td><button class="gs">点击挂失</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 全部会员信息 -->
                <script>
                    $.ajax({
                        method:'get',
                        url:`${besaurl}member_search`,
                        success:function(data){
                            // console.log(data);
                            const v_p = new Vue({
                                el:'.qbhyxx',
                                data:{
                                    arr:data
                                }
                            })
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                </script>




            </div>
        </div>
    </div>




    
    <!-- 二级菜单 -->
    <script>
        // 二级菜单渐入渐出
            $.each($('dl'),function(index){
                // console.log($('dl')[index]);
                $('dl').eq(index).click(function(){
                    // console.log($('dl').dd)
                    if(index==3){
                        $('dl').eq(index).css({
                        height:'212px',
                        transition: '2s'
                    })
                    }else{
                        $('dl').eq(index).css({
                        height:'131px',
                        transition: '2s'
                    })
                    }
                })
                $('dl').eq(index).on('dblclick',function(){
                    // console.log($('dl').dd)
                    $('dl').eq(index).css({
                        height:'50px',
                        transition: '2s'
                    })
                })
            })
            $.each($('.dd-div'),function(index){
                console.log(index);
                $('.dd-div').eq(index).click(function(){
                    $.each($('.dd-div'),function(index){
                        $('.boxcent').eq(index).css({
                            display:'none'
                        })
                    })
                    $('.boxcent').eq(index).css({
                        display:''
                    })
                })
            })
    </script>

    <!-- bottom底部 -->
    <div class="box-bottom">
        <span>Copyright C2022美发管理系统v1.0</span>
    </div>
</body>
</html>